<template>
  <div>
    <a-modal
      centered
      title="填写材料"
      v-model="visible"
      :width="950"
      @ok="batchFill"
      @cancel="onCancel"
    >
      <div class="base-info-scroll">
        <a-form-model
          ref="ruleForm"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :model="publicForm"
        >
          <a-divider orientation="left">
            公共材料
          </a-divider>
          <a-form-model-item v-for="(item,index) in publicForm" :key="index" :label="item.label" :rules="{ required: item.required == '1' ? true : false, message: '请填写' + item.label, trigger: item.type === 'text' ? 'blur' : 'change' }">
            <a-input v-if="item.type === 'text'" v-model="item.value" :placeholder="`填写${item.label}`" />
            <a-textarea v-if="item.type === 'textarea'" :rows="4" v-model="item.value" :placeholder="`填写${item.label}`" />
            <a-select v-if="item.type === 'select'" v-model="item.value" :placeholder="`选择${item.label}`">
              <a-select-option v-for="(item,index) in item.items" :key="index" :value="index">{{ item }}</a-select-option>
            </a-select>
            <a-radio-group v-model="item.value" v-if="item.type === 'radio'">
              <a-radio v-for="(item,index) in item.items" :key="index" :value="index">
                {{ item }}
              </a-radio>
            </a-radio-group>
            <a-upload
              v-if="item.type === 'file-xls'"
              accept=".xls,.xlsx,.csv"
              name="file"
              :multiple="true"
              :action="updURL"
              :headers="headers"
              @change="info => handleFile(info, item.name)"
            >
              <a-button> <a-icon type="upload" /> {{ item.label }} </a-button>
            </a-upload>
            <a-upload
              v-if="item.type === 'file'"
              accept="*"
              name="file"
              :multiple="true"
              :action="updURL"
              :headers="headers"
              @change="info => handleFile(info, item.name)"
            >
              <a-button> <a-icon type="upload" /> {{ item.label }} </a-button>
            </a-upload>
            <a-upload
              v-if="item.type === 'image'"
              accept=".png,.jpg,.jpeg"
              name="file"
              list-type="picture-card"
              class="avatar-uploader"
              :show-upload-list="false"
              :action="updURL"
              :headers="headers"
              @change="info => handleChange(info, item.name)"
            >
              <img v-if="item.value" :src="item.value" width="105" />
              <div v-else>
                <div class="ant-upload-text">
                  {{ item.label }}
                </div>
              </div>
            </a-upload>
          </a-form-model-item>
          <div v-for="(item,index) in provideMatForm" :key="index">
            <a-form-model
              ref="ruleForm"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
              :model="provideMatForm"
            >
              <a-form-model-item></a-form-model-item>
            </a-form-model>
            <a-divider orientation="left">
            </a-divider>
          </div>
        </a-form-model>
      </div>
    </a-modal>
  </div>
</template>

<script>
  import apis from '@/api'
  import storage from 'store'
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import { getBatchFill } from '@/api/business'

  export default {
    props: {
      selectKeys: {
        type: Array,
        default: () => []
      }
    },
    name: 'BatchFill',
    data () {
      return {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
        visible: false,
        updURL: apis.Upload,
        headers: {
          'Access-Token': storage.get(ACCESS_TOKEN)
        },
        publicForm: {},
        provideForm: {},
        baseTypeOpts: {},
        matTypeOpts: {},
        provideMatForm: {}
      }
    },
    created () {
      this.getBatchFill()
    },
    methods: {
      getBatchFill () {
        const app = this
        const params = {}
        params['cb_ids'] = app.selectKeys
        getBatchFill(params).then(res => {
          if (res.status === 0) {
            app.publicForm = res.result.public_items
            app.provideForm = res.result.contract_businesses
          } else {
            app.$warning({
              title: res.msg
            })
          }
          this.visible = true
        })
      },
      handleChange (info, name) {
        const { publicForm } = this
        if (info.file.status === 'uploading') {
          return false
        }
        if (info.file.status === 'done') {
          publicForm[name].value = info.file.response.result.url
        }
      },
      handleFile (info, name) {
        const { publicForm } = this
        if (info.file.status === 'uploading') {
          return false
        }
        if (info.file.status === 'done') {
          publicForm[name].value = info.file.response.result.url
          publicForm[name].filename = info.file.name
        }
      },
      batchFill () {},
      onCancel () {
        this.visible = false
        this.$emit('cancel', this.visible)
      }
    }
  }
</script>

<style scoped>

</style>
